<template>
  <div class="search">
    <div class="input-group mb-3 mt-3">
      <span class="input-group-text iconfont sousuo" id="basic-addon1"/>
      <input type="text" class="form-control" placeholder="请输入查找的颜色"
             aria-label="Username" aria-describedby="basic-addon1"
             v-model="value" @keydown.enter="update">
    </div>
    <Doubt :tips="tips"/>
  </div>
</template>

<script lang="ts">
import Doubt from '../Doubt/index.vue'
import { useStore } from "vuex";
import { ref } from 'vue'
import {isChinese, hasHex, isHex, prefixRgb, isJapanese, prRgb} from '@/utils/tool';

function hexCheck(string:string) {
  if(hasHex(string)) {
    const val = string.replace('#','');
    if(isHex(val)) {
      return string
    }
  } else if(isHex(string)) {
    return '#' + string
  } else {
    return null
  }
}

function rgbCheck(string:string) {
  if(prefixRgb(string)) { // rgb(225,22,22)
   return  string.replace('rgb(','').replace(')','').replace('RGB(','').split(',');
  } else {
    return []
  }
}

function nameCheck(string:string) {
  if(isChinese(string) || isJapanese(string)) {
    return string
  } else {
    return null
  }
}

function keyCheck(string:string) {
  if(!prRgb(string)) {
    const ex = /[a-zA-Z]/i;
    if(isChinese(string) === null && ex.test(string)) {
      return string
    }else {
      return null
    }
  }
}

export default {
  components: { Doubt },
  setup() {
    const tips = ['1.你能够通过查找的名字来查找需要的颜色值，前提数据库里有。例如：撫子 ', '2.你能够通过hex值直接查找颜色，如果是rgb的话需要加上rgb()/RGB() 例如：#e16b8c,rgb(255,255,255)'];
    const store = useStore()
    const value = ref('')
    
    const update = () => {
      const hexSearch = hexCheck(value.value)
      const rgbSearch = rgbCheck(value.value)
      const nameSearch = nameCheck(value.value)
      const keySearch = keyCheck(value.value)
      store.commit('setValueState',{
        value:value.value,
        name:nameSearch,
        key:keySearch,
        rgb: rgbSearch,
        hex: hexSearch
      })
    }
    return {
      update, value,tips
    }
  },
}
</script>

<style scoped lang="scss">

.search {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-group {
  width: 20% !important;
  margin-left: 20px;
}

/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
  .input-group {
    width: 36% !important;
    margin-left: 20px;
  }
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
  .input-group {
    width: 29% !important;
    margin-left: 20px;
  }
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {
  .input-group {
    width: 26% !important;
    margin-left: 20px;
  }
}

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
  .input-group {
    width: 20% !important;
    margin-left: 20px;
  }
}

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
  .input-group {
    width: 20% !important;
    margin-left: 20px;
  }
}

.input-group-text {
  background-color: unset !important;
}

.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #ced4da;
  outline: 0;
  border-left-color: unset;
  border-left-style: unset;
  border-left-width: unset;
  box-shadow: unset;
}

.form-control {
  border-radius: 1.25rem;
  padding: 0.375rem 0.3rem;
  border-left-color: unset;
  border-left-style: unset;
  border-left-width: unset;
}

.input-group-text {
  border-radius: 1.25rem;
  padding: 0.2rem 0.4rem;
}

</style>
